<!DOCTYPE html>

<!--
    「BrowserQuestで遊んでみた」
    ExaField（エグザ・フィールド）
    twitter: @exafield
    
    スライドのテンプレート
        Google HTML5 slide template
        URL: http://code.google.com/p/html5slides/
-->

<html>
<head>
<title>BrowserQuestで遊んでみた</title>

<meta charset='utf-8'>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<script src='./slides.js'></script>
</head>

<style media="print">
@page {
    size: A4 landscape;
    @
    top-right
    {
    content
    :
    "Page "
    counter(
    page
    );
}

}
article {
    page-break-after: always;
    margin: auto;
}

article.next,article.past {
    display: block;
}

body {
    display: block !important;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1.5em;
}
</style>
<script type="text/javascript">
    window.addEventListener('load', function() {
        var link = document.getElementsByTagName('link');
        link[link.length - 1].setAttribute("media", "screen");
    });
</script>


<body style='display: none'>

    <section class='slides layout-regular template-default'>

        <!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->


        <article>
            <h1>
                BrowserQuestで<br>遊んでみた
            </h1>
            <p>
                <a href="http://twitter.com/exafield">@exafield</a><br><br> 2012-04-14<br><a href="http://atnd.org/events/26621">海外ゲーム技術勉強会</a>
            </p>
        </article>

        <article>
            <h3>
                自己紹介
            </h3>
            <img src="images/personaldata_exafield.png" alt="twitter:exafield" />
            <ul class="build">
                <li>名前は「エグザ」と読みます。</li>
                <li>PSN/XboxLive アカウント:&nbsp;exarc</li>
                <li>ジャンルを問わずプレイするけど、歴史モノが苦手。<br>
                <span class="smaller">でも、宇宙世紀には興味ありますよ？</span></li>
                <li>2012年3月にSkyrim（Xbox360版）のメインシナリオをクリアしました。<br>
                <span class="smaller">その冒険の後に、膝に矢を受(ry)</span></li>
                <li>Trials HD っておもしろいですよね。</li>
            </ul>
        </article>

        <article class="centered">
            <p><br>BrowserQuest</p>
        </article>

        <article class="centered">
            <p>BrowserQuest<br>知っていますか？<br><br>（知ってる方は挙手！）</p>
        </article>

        <article>
            <h3>デモンストレーション
            </h3>
            <a href="http://browserquest.mozilla.org/">http://browserquest.mozilla.org/</a>
        </article>

        <article class="centered">
            <p>HTML5で作られた<br>MMOのゲーム</p>
        </article>

        <article>
            <h2>遊んでみた。</h2>
        </article>
        
        <article>
            <h3>BrowserQuestを公開日に遊んでみた。</h3>
            <img src="images/browserquest_title.png" alt="タイトル画面" width="796px" height="600px" />
        </article>

        <article>
            <h3>くっ！　ガッツが　たりない！</h3>
            <img src="images/browserquest_connecting.png" alt="接続画面" width="796px" height="600px" />
        </article>
        
        <article class="centered">
            <p>注目度が高かったらしく、<br>公開日は名前入力から先に<br>進めませんでした(;´Д｀)
            </p>
        </article>

        <article>
            <h3>公開から数日後</h3>
            <img src="images/browserquest_nyan.png" alt="プレイ画面" width="796px" height="600px" />
        </article>

        <article class="centered">
            <p><br>にゃんにゃんにゃんにゃん！</p>
        </article>

        <article class="centered">
            <p><del>にゃんにゃんにゃんにゃん！</del><br>サーバに接続できた！</p>
        </article>

        <article>
            <h3>どんなMMOゲーム？</h3>
            <ul>
                <li>2Dの見下ろし型</li>
                <li>FCゼ○ダの伝説っぽいスクロールマップ</li>
                <li>移動先をマウスでクリック・タッチパネルでタッチ</li>
                <li>武器や防具が装備できる</li>
                <li>敵をクリック・タッチして攻撃相手を指定</li>
                <li>ライフゲージが無くなったら死ぬ<br>→近くのリスポーンポイントで復帰</li>
                <li>同じサーバにいる人達でチャットができる<br>（オープンチャット）</li>
            </ul>
        </article>

        <article>
            <h3>実績あります</h3>
            <img src="images/browserquest_lastarchivements.png" alt="実績" width="770px" height="560px" />
            <div class="source">※&nbsp;20個中19個まで実績解除！</div>
        </article>

        <article>
            <h2>HTML5でゲーム</h2>
        </article>

        <article class="centered">
            <p>「FlashからHTML5に置き換わる<br>って言われてるけど<br>そんなことってできるの？」
            </p>
        </article>

        <article class="centered">
            <p>フランスの<a href="http://www.littleworkshop.fr/">Little Workshop</a>と<br>Mozillaが共同でゲームを開発
            </p>
            <div class="source">Source:<a href="http://internet.watch.impress.co.jp/docs/news/20120328_522131.html">Internet Watch</a></div>
        </article>

        <article class="smaller">
            <h3></h3>
            <q>It’s time for some gaming action with a new <a title="HTML5" href="https://developer.mozilla.org/en/html/html5">HTML5</a> game demo: <a href="http://browserquest.mozilla.org">BrowserQuest</a>, a massively multiplayer adventure game created by <a href="http://www.littleworkshop.fr">Little Workshop</a> (<a href="http://twitter.com/glecollinet">@glecollinet</a> &amp; <a href="http://twitter.com/whatthefranck">@whatthefranck</a>) and Mozilla.</q>
            <div class='author'>
                <a href="http://hacks.mozilla.org/author/paul/">Paul Rouget</a>
            </div>
            <div class="source">Source:<a href="http://hacks.mozilla.org/2012/03/browserquest/">Mozilla Hacks &#8211; the Web developer blog</a></div>
        </article>

        <article class="centered">
            <p>HTML5の技術デモとして<br>MMOのゲームを制作</p>
        </article>

        <article class="centered">
            <p>ゲームの作成に必要な要素は<br>HTML5にも備わっている
            </p>
        </article>

        <article class="smaller">
            <h3>キーワード</h3>
            <table>
                <tr><th>ロジック</th><td>JavaScript</td></tr>
                <tr><th>グラフィックス</th><td>HTML: &lt;canvas&gt;</td></tr>
                <tr><th>デバイス毎の対応</th><td>CSS3: Media Queries</td></tr>
                <tr><th>通信処理</th><td>WebSocket</td></tr>
                <tr><th>並列処理</th><td>JavaScript: Web Workers</td></tr>
                <tr><th>アセット</th><td>.png, .gif .mp3, .ogg, ...<br>（Webブラウザで扱えるファイル形式）</td></tr>
                <tr><th>セーブデータ</th><td>HTML5: Local Storage</td></tr>
            </table>
            <div class="source">Refer to:<a href="http://www.slideshare.net/gawd/game-development-with-html5">Game Development With HTML5</a></div>
        </article>


        <article>
            <h2>中身を覗いてみる。<span class="smaller">|дﾟ)ﾁﾗｯ</span></h2>
        </article>
        
        <article>
            <h3>検索</h3>
            <img src="images/google_search.png" alt="Google検索" width="796px" height="600px" />
        </article>

        <article>
            <h3>GitHub</h3>
            <img src="images/github_clone.png" alt="GitHub" width="796px" height="600px" />
        </article>
        
        <article>
            <h3>git clone</h3>
<pre>
> git clone https://github.com/mozilla/BrowserQuest.git
</pre>
        </article>

        <article>
            <h3>ドキュメントを確認</h3>
            <ul>
                <li>クライアント側：<b>client/README.md</b></li>
                <li>ゲームサーバ側：<b>server/README.md</b></li>
            </ul>
            <div class="build">
                <p>Webサーバとnode.jsが動く環境が必要</p>
                <p>少しやってみたら出来るんじゃね？←</p>
            </div>
        </article>

        <article>
            <h2>ローカルに設置してみる。<span class="smaller">( ´･ω･`)_且 ﾄﾞｿﾞｰ</span></h2>
        </article>

        <article>
            <h3>設置環境</h3>
            <h4>ホストOS</h4>
            <ul>
                <li>Windows7 Professional 64bit</li>
            </ul>
            <h4>ゲストOS</h4>
            <ul>
                <li>Oracle VM VirtualBox 4.1.10</li>
                <li>Ubuntu 11.10 32bit</li>
            </ul>
            ホストOSとゲストOSのネットワークは<br>VirtualBoxの設定でブリッジアダプタとして接続
        </article>

        <article>
            <h3>Ubuntuソフトウェアセンターでインストール</h3>
            <ul>
                <li>Git</li>
                <li>node.js</li>
                <li>nginx</li>
                <li></li>
                <li></li>
            </ul>
            最新バージョンではないけど、ドキュメントにある要件（node.js&gt;=0.4.7）は満たしている。
        </article>

        <article>
            <h3>node.jsライブラリは<b>'npm install'</b>でインストール</h3>
            <ul>
                <li>underscore</li>
                <li>log</li>
                <li>bison</li>
                <li>websocket</li>
                <li>websocket-server</li>
                <li>sanitizer</li>
                <li>memcache（オプション）</span></li>
            </ul>
        </article>

        <article>
            <h3>クライアント側の準備―ビルド</h3>
            <ul>
                <li>クライアント側のソースコードをビルド</li>
            </ul>
<pre>
> cd bin/
> chmod +x build.sh
> ./build.sh
</pre>
            <ul>
                <li>nginxで参照できるパスにシンボリックリンクを張るなどする。</li>
            </ul>
        </article>

        <article>
            <h3>クライアント側の準備―nginxの設定</h3>
            <ul>
                <li>80番ポートでWebサーバを立ち上げ</li>
                <li>8000番ポートで、別途起動するnode.jsのゲームサーバ側にプロキシ転送</li>
                <li>クライアント設定ファイル`client/config/config_local.json`を変更</li>
                <li>nginxを起動</li>
            </ul>
<pre>
> /etc/init.d/nginx start
</pre>
            <p>`http://[サーバマシンのIPアドレス]/` にアクセスすると名前入力画面が出る（はず）</p>
        </article>

        <article>
            <h3>ゲームサーバ側の準備ーnode.jsの実行</h3>
            <ul>
                <li>ゲームサーバ設定ファイル`server/config.json`変更</li>
                <li>ゲームサーバを起動</li>
            </ul>
<pre>
> node server/js/main.js
</pre>
<p>`http://[サーバマシンのIPアドレス]:8000/status` でクライアントの接続数を確認（[0]と表示された）</p>

        </article>
        
        <article>
            <h3>準備は整ったはず・・・！</h3>
            <br>
            <div class="build">
                <p class="smaller">これだけではゲームサーバにつながりません！(　ﾟДﾟ)</p>
                <p>（Webで検索、検索...）</p>
                <a href="http://uzulla.hateblo.jp/entry/2012/03/28/224435">http://uzulla.hateblo.jp/entry/2012/03/28/224435</a>
            </div>
        </article>

        <article class="smaller">
            <q>これギッハブから落としてきてREADMEの通りにかいても動かないんですよね。
            </q>
            <br>
            <div class="build">
                <p>なん...だと？</p>
            </div>
            <div class="source">Source: <a href="http://uzulla.hateblo.jp/entry/2012/03/28/224435">http://bq.cfe.jp/ browserquestサーバーをさくらのタダクラウドに立てた</a></div>
        </article>


        <article>
            <h3>くっ！　ガッツが　たりない！（２回目）</h3>
            <p>先ほど検索して見つけた<a href="http://uzulla.hateblo.jp/entry/2012/03/28/224435">ページ</a>の内容を要約すると...</p>
            <ul>
                <li>`server/js/main.js`にバグがあってエラーが出る。</li>
                <li>memcachedがオプションじゃない。</li>
                <li>アセットファイルがgithubのリポジトリに含まれていない。</li>
            </ul>

            <p>あとは、FirebugのNetworkのタブで404エラーになっているものをひとつずつ気合いでつぶす！</p>
            <div class="source">Source: <a href="http://uzulla.hateblo.jp/entry/2012/03/28/224435">http://bq.cfe.jp/ browserquestサーバーをさくらのタダクラウドに立てた</a></div>
        </article>

        <article>
            <h2> 　　　壁│orz...<br>　　　─┴────</h2>
        </article>


        <article>
            <h3>おまけ―Firefoxのメニューから[Web開発]-[調査]</h3>
            <img src="images/browserquest_tilt1.png" alt="tilt1" width="796px" height="600px" />
        </article>

        <article>
            <h3>―[3D]でHTMLの構造を視覚化</h3>
            <img src="images/browserquest_tilt2.png" alt="tilt2" width="796px" height="600px" />
        </article>

        <article>
            <h2>まとめ</h2>
        </article>

        <article>
            <h3>まとめ</h3>
            <ul class="build">
                <li>HTML5でゲームは作れます。<br>（Mozillaが無料のHTML5ゲームを公開）</li>
                <li>BrowserQuestを紹介しました。</li>
                    <ul><li>GitHubでオープンソースとして<a href="https://github.com/mozilla/BrowserQuest">公開</a>しています。</li></ul>
                <li>BrowserQuestをローカル環境に設置してみました。</li>
                <ul><li><span class="smaller">（設置完了までもう少しがんばりましょう...(´･ω･`)）</span></li></ul>
                <li>ソースコード解説がまったくもって出来ていません。</li>
                <ul><li><span class="smaller">（ソースコード解説という次回につながるネタが出来ましたね...(´･ω･`)）</span></li></ul>
            </ul>
            <br><br>
            <div class="build" style="text-align: center;">
                <p>海外ゲーム技術勉強会の歴史は<br>まだまだ始まったばかりだ！</p>
                
            </div>
        </article>
        
        
        <article>
            <h2>以上</h2>
            <h3>質問は？</h3>
        </article>


    </section>

</body>
</html>
